<template>
  <div class="info-wrap">
    <div class="info-photowrap">
      <img :src="userInfo.headImg ? userInfo.headImg : require('@/assets/home/icon-store.png')" alt />
      <upload
        class="edit"
        writing="修改头像"
        :image.sync="userInfo.head_img"
        @image-success="imageSuccess"
      />
    </div>
    <div class="info-text">
      <p class="info-name">{{userInfo.username}}</p>
      <p class="info-phone">{{showPhone}}</p>
      <p class="info-wzd">
        <span class="info-title">资料完整度</span>
        <el-progress :percentage="intactNum"></el-progress>
      </p>
      <p class="info-time">
        <span class="info-title">开通时间</span>
        <span>{{showDate}}</span>
      </p>
      <p class="info-ckxy" v-show="userInfo.contract_id">
        <span @click="_previewContract(userInfo.contract_id)">查看云木屋协议 ></span>
      </p>
    </div>
  </div>
</template>

<script>
import { previewContract } from "@/api/mycontract";
import { getUserInfo } from "@/api/accountSettings";
import { mapGetters } from "vuex";
import upload from "@/components/UploadImage/UploadImage";
import { modifyUserInfo } from "@/api/user";
export default {
  name: "info",
  components: {
    upload,
  },
  data() {
    return {
      showPhone: "",
      intactNum: 0,
      userInfo: {},
      showDate: "",
    };
  },
  computed: {
    // ...mapGetters(["userInfo"])
  },

  created() {
    this._getUserInfo();
  },

  methods: {
    timestampToTime(timestamp) {
      let date = new Date(timestamp * 1000);
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() + " ";
      return Y + M + D;
    },
    // 获取用户信息
    _getUserInfo() {
      getUserInfo().then((res) => {
        this.userInfo = res.data;
        this.showDate = this.timestampToTime(res.data.start_time);
        // console.log("展示时间", this.showDate);

        // console.log("账户信息", this.userInfo);
        let reg = /^(\d{3})\d+(\d{4})$/;
        this.showPhone = this.userInfo.loginphone.replace(reg, "$1****$2");
        if (this.userInfo.intact_rate == 1) {
          this.intactNum = 33;
        } else if (this.userInfo.intact_rate == 2) {
          this.intactNum = 66;
        } else {
          this.intactNum = 100;
        }
        console.log("完整度", this.intactNum);
      });
    },
    // 代理协议查看
    _previewContract(id) {
      let params = {
        contract_id: id,
      };
      previewContract(params).then((res) => {
        if (res.code == 1) {
          window.open(res.data.url);
        }
      });
    },
    // 上传头像
    imageSuccess(obj) {
      console.log(obj.url);
      modifyUserInfo({
        userid: this.userInfo.userid,
        headImg: obj.url,
      }).then((res) => {
        this.$message({
          type: "success",
          message: "头像修改成功",
        });
        location.reload();
        // this._getUserInfo();
      });
    },
  },
};
</script>

<style lang='scss'>
.info-wrap {
  .el-progress {
    .el-progress-bar {
      .el-progress-bar__outer {
        height: 8px !important;
        border-radius: initial;
        background: #e6e6e6;
        .el-progress-bar__inner {
          border-radius: initial;
        }
      }
    }
    .el-progress__text {
      margin-left: 13px;
    }
  }
  .edit {
    .el-upload--text {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

<style lang='scss' scoped>
.info-wrap {
  background: #fff;
  display: flex;
  padding: 50px 70px;
  .info-photowrap {
    position: relative;
    img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      margin-right: 40px;
    }
    .edit {
      position: absolute;
      top: 0;
      left: 0;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: none;
      line-height: 120px;
      background: rgba(47, 46, 45, 0.7);
      color: #fff;
      font-size: 14px;
      opacity: 0;
      transition: all 0.3s;
      &:hover {
        opacity: 1;
      }
    }
  }
  .info-text {
    flex: 1;
    height: 120px;
    p {
      line-height: 10px;
      color: #a1a1a1;
      .info-title {
        display: inline-block;
        width: 100px;
      }
    }
    .info-name {
      font-size: 18px;
      color: #333;
    }
    .info-wzd {
      display: flex;
      position: relative;
      margin-top: 23px;
      .el-progress {
        width: 300px;
        position: absolute;
        left: 100px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: initial;
        .el-progress-bar {
          height: 8px;
        }
      }
    }
    .info-ckxy {
      text-align: right;
      span {
        font-size: 14px;
        cursor: pointer;
        color: #ff7f5b;
      }
    }
  }
}
</style>